<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="" prop="type">
        <el-radio-group v-model="queryParams.type" size="small" @input="handleGroupInput">
          <el-radio-button :label="1">今日</el-radio-button>
          <el-radio-button :label="2">昨日</el-radio-button>
          <el-radio-button :label="3">近7日</el-radio-button>
          <el-radio-button :label="4">近30日</el-radio-button>
          <el-radio-button :label="5">全部</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          size="small"
          v-model="dateRange"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          @change="handleDateChange">
        </el-date-picker>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item> -->
    </el-form>
    <!-- :show-summary="queryParams.type !== 1 && queryParams.type !== 2" -->
    <el-table v-loading="loading" :data="list" :summary-method="getSummaries">
      <el-table-column label="日期" align="center" prop="date" />
      <el-table-column label="图片换脸（阿里）-次数" align="center" prop="picChangeFaceAliCount">
        <template slot-scope="scope">
          <span>{{ scope.row.picChangeFaceAliCount }}次</span>
        </template>
      </el-table-column>
      <el-table-column label="图片换脸（火山）-次数" align="center" prop="picChangeFaceHuoshanCount">
        <template slot-scope="scope">
          <span>{{ scope.row.picChangeFaceHuoshanCount }}次</span>
        </template>
      </el-table-column>
      <el-table-column label="视频换脸（阿里）-次数" align="center" prop="videoChangeFaceAliCount">
        <template slot-scope="scope">
          <span>{{ scope.row.videoChangeFaceAliCount }}次</span>
        </template>
      </el-table-column>
      <el-table-column label="视频换脸（火山）-次数" align="center" prop="videoChangeFaceHuoshanCount">
        <template slot-scope="scope">
          <span>{{ scope.row.videoChangeFaceHuoshanCount }}次</span>
        </template>
      </el-table-column>
      <el-table-column label="视频换脸（阿里）-时长" align="center" prop="videoChangeFaceAliDuration" />
      <el-table-column label="视频换脸（火山）-时长" align="center" prop="videoChangeFaceHuoshanDuration" />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
  import { getInterfaceStatisticsList } from "@/api/shuiyin/shuiyin";

  export default {
    name: "CommentManage",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 总条数
        total: 0,
        // 租户管理表格数据
        list: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 日期范围
        dateRange: [],
        // 查询参数
        queryParams: {
          beginDate	: null,
          endDate	: null,
          type: 1,
          pageNum: 1,
          pageSize: 10,
        }
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询租户管理列表 */
      getList() {
        this.loading = true;
        getInterfaceStatisticsList(this.queryParams).then(response => {
          this.list = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      handleGroupInput(evt) {
        this.queryParams.type = evt;
        this.getList();
      },
      // 日期时间选择组件确定事件
      handleDateChange(event) {
        this.queryParams.commentBeginDate = event[0];
        this.queryParams.commentEndDate = event[1];
        this.getList();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.queryParams.beginDate = null;
        this.queryParams.endDate = null;
        this.dateRange = [];
        this.handleQuery();
      },
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总计';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' 元';
          } else {
            sums[index] = 'N/A';
          }
        });

        return sums;
      }
    }
  };
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
  }
  .avatar {
    width: 90px;
    height: 90px;
    display: block;
  }
</style>
